import { createContext, useContext, useState } from "react";

const MsgContext = createContext(); // 创建一个 Context 对象

function A() {
  return (
    <div>
      this is A
      <B />
    </div>
  );
}

function B() {
  const msg = useContext(MsgContext); // 使用 Context 对象
  return <div>this is B! {msg}</div>;
}

function App() {
  const msg = "this is App msg";
  return (
    <div className="App">
      <MsgContext.Provider value={msg}>
        Hello World!
        <A />
      </MsgContext.Provider>
    </div>
  );
}

export default App;
